<template>
    <div class="page-container">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="全部" name="first">
                <div class="menus">
                    <div class="menu-item" v-for="i in 8" :key="i" @click="showDetail = true">
                        <div class="cover" :style="{ backgroundImage: `url(/src/views/menu/images/menu${i}.png)` }"></div>
                        <div>芝士培根拌饭</div>
                    </div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="主食" name="second">
                <div class="menus">
                    <div class="menu-item" v-for="i in zcItems" :key="i" @click="showDetail = true">
                        <div class="cover" :style="{ backgroundImage: `url(/src/views/menu/images/menu${i}.png)` }"></div>
                        <div>芝士培根拌饭</div>
                    </div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="凉菜" name="third">
                <div class="menus">
                    <div class="menu-item" v-for="i in lcItems" :key="i" @click="showDetail = true">
                        <div class="cover" :style="{ backgroundImage: `url(/src/views/menu/images/menu${i}.png)` }"></div>
                        <div>芝士培根拌饭</div>
                    </div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="热菜" name="forth">
                <div class="menus">
                    <div class="menu-item" v-for="i in rcItems" :key="i" @click="showDetail = true">
                        <div class="cover" :style="{ backgroundImage: `url(/src/views/menu/images/menu${i}.png)` }"></div>
                        <div>芝士培根拌饭</div>
                    </div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="披萨" name="fifth">
                <div class="menus">
                    <div class="menu-item" @click="showDetail = true" v-for="i in hcItems" :key="i">
                        <div class="cover" :style="{ backgroundImage: `url(/src/views/menu/images/menu${i}.png)` }"></div>
                        <div>流心卷边比萨</div>
                    </div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                    <div class="menu-item placeholder" placeholder=""></div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <DetailDialog v-if="showDetail" @close="showDetail = false" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import DetailDialog from './detail2.vue'
const zcItems = [1, 2]
const lcItems = [3, 4, 5]
const rcItems = [6, 7]
const hcItems = [8]
const showDetail = ref(false)

const activeName = ref('first')
</script>
<style lang="scss" scoped>
.menus {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: space-between;
}

.menu-item {
    width: 200px;
    // padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;

    div:last-child {
        margin-top: 5px;
        font-weight: 500;
        color: #333;
        padding-bottom: 5px;
    }

    &.placeholder {
        height: 0;
        overflow: hidden;
        opacity: 0;
    }
}

.cover {
    width: 100%;
    height: 150px;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-size: cover;
    background-position: center;
}
</style>